<script lang="ts" setup name="Modal">
    import { ref } from 'vue';

    let isShow = ref(false);

    function openModalWindow() {
        isShow.value = true;
    }

    function closeModalWindow() {
        isShow.value = false;
    }
</script>

<template>
    <button @click="openModalWindow">展示弹窗</button>
    <!-- Teleport将内容插入到指定容器中，下面就是插入到body，解决了filter的bug。
         to属性就是用来指定被插入的容器，可以是元素选择器、选择器字符串（#app）、类选择器（.app）。 -->
    <Teleport to="body">
        <div v-show="isShow" class="modal">
            <h2>标题</h2>
            <p>内容 内容 内容 内容 内容</p>
            <button @click="closeModalWindow">关闭弹窗</button>
        </div>
    </Teleport>
</template>

<style scoped>
    .modal {
        width: 200px;
        height: 160px;
        background-color: skyblue;
        border-radius: 10px;
        padding: 5px;
        box-shadow: 0 0 5px;
        text-align: center;
        position: fixed;
        top: 30px; right: 0; left: 0;
        margin: auto;
    }
</style>